<template>
  <div class="wrapper">
    <div class="title">
      <span class="title__back iconfont" @click="handleBackClick"
        >&#xe6db;</span
      >
      <div class="title__text">管理收获地址</div>
      <div class="title__add" @click="handleAddAddress">新建</div>
    </div>
    <div class="empty" v-if="addressList.length === 0">暂无地址信息</div>
    <template v-for="address in addressList" :key="address._id">
      <div class="address" v-if="addressList.length > 0">
        <div
          class="address__info"
          :address="address"
          @click="() => handleUpdateClick(address._id)"
        >
          <span class="address__info__user">{{ address.name }}</span>
          <span class="address__info__phone">{{ address.phone }}</span>
        </div>
        <p class="address__detail">
          {{ address.city }}{{ address.department }}{{ address.houseNumber }}
        </p>
        <div class="iconfont address__icon" @click="handleAddressEdit">
          &#xe6db;
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { get } from "@/utils/request.js";

// 地址列表获取逻辑
const useAddressListEffect = () => {
  const addressList = ref([]);
  const getAddressList = async () => {
    const result = await get("/api/user/address");
    if (result?.errno === 0 && result?.data?.length) {
      addressList.value = result.data;
    }
  };
  return { addressList, getAddressList };
};

export default {
  name: "MyAddressList",
  setup() {
    const router = useRouter();
    const { addressList, getAddressList } = useAddressListEffect();
    getAddressList();
    const handleAddressClick = (id) => {
      router.push(`/AddAddress?id=${id}`);
    };
    const handleAddAddress = () => {
      router.push("AddAddress");
    };
    const handleBackClick = () => {
      router.back();
    };
    const handleAddressEdit = () => {
      router.push("UpsertAddress");
    };

    return {
      addressList,
      handleAddressClick,
      handleAddAddress,
      handleBackClick,
      handleAddressEdit,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "./src/style/viriables.scss";
@import "./src/style/mixins.scss";
.wrapper {
  overflow-y: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #f8f8f8;
}
.title {
  display: flex;
  line-height: 0.44rem;
  background-color: #fff;
  text-align: center;
  font-size: 0.16rem;
  &__back {
    width: 0.2rem;
    margin-left: 0.18rem;
    font-size: 0.2rem;
    color: #b6b6b6;
  }
  &__text {
    text-align: center;
    flex: 1;
  }
  &__add {
    margin-right: 0.2rem;
    font-size: 0.14rem;
  }
}
.address {
  position: relative;
  margin: 0.16rem 0.18rem 0 0.18rem;
  padding: 0.18rem 0.64rem 0.18rem 0.16rem;
  background: #fff;
  border-radius: 0.04rem;
  &__info {
    display: flex;
    line-height: 0.2rem;
    font-size: 0.14rem;
    color: #999;
    &__user {
      width: 0.94rem;
    }
    &__phone {
      flex: 1;
    }
  }
  &__detail {
    margin-top: 0.08rem;
    line-height: 0.2rem;
    font-size: 0.14rem;
    color: #333;
  }
  &__icon {
    position: absolute;
    right: 0.2rem;
    top: 0.4rem;
    transform: rotate(180deg);
    font-size: 0.2rem;
    color: #999;
  }
}
.empty {
  @include empty;
}
</style>